<script setup lang="ts">
import { inject, onMounted, reactive, ref, watch } from 'vue';

import { cloneDeep } from '@vben/utils';

import {
  ElCol,
  ElCollapse,
  ElCollapseItem,
  ElRadio,
  ElRadioGroup,
  ElRow,
  ElSlider,
} from 'element-plus';

import { usePublicStore } from '#/store';

const publicStore = usePublicStore();

const currentLayer = inject('currentSelectedLayer') as any;
const activeNames = ref(['renderParams', 'imageEnhancement']);

const imageRasterRenderOptions = reactive({
  layer: currentLayer.value,
  layout: {
    visibility: 'visible',
  },
  paint: {
    'raster-opacity': 100, // 最后需要转到0-1
    'raster-saturation': 0, // 最后需要转到0-1
    'raster-contrast': 0, // 最后需要转到0-1
    'raster-resampling': 'linear',
  },
}) as any;

const renderParamsReturn = () => {
  // 此处需要深拷贝，否则会使imageRasterRenderOptions的对象参数与currentLayer.value的对象参数挂钩，导致互相影响
  // const renderParams = JSON.parse(JSON.stringify(currentLayer.value.renderParams))
  const renderParams = currentLayer.value.templateParams
    ? cloneDeep(currentLayer.value.templateParams)
    : cloneDeep(currentLayer.value.renderParams);
  delete currentLayer.value.templateParams;

  Object.keys(renderParams).forEach((key) => {
    imageRasterRenderOptions[key] = renderParams[key];
  });
};
watch(
  imageRasterRenderOptions,
  () => {
    publicStore.setRenderOptions(imageRasterRenderOptions);
  },
  {
    deep: true,
  },
);

onMounted(() => {
  const { renderType, templateParams } = currentLayer.value;
  //  当原先渲染方式是该方式时，或现在渲染方式是来自于模板时，需要参数恢复（赋值）
  if (renderType[1] === 'imageRasterRender' || templateParams) {
    renderParamsReturn();
  }
  publicStore.setRenderOptions(imageRasterRenderOptions);
});
</script>

<template>
  <div class="all">
    <ElRow class="itemRow">
      <ElCol :span="24">
        <ElCollapse v-model="activeNames">
          <ElCollapseItem title="渲染参数" name="renderParams">
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 不透明度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  v-model.number="
                    imageRasterRenderOptions.paint['raster-opacity']
                  "
                  show-input
                  size="small"
                />
              </ElCol>
            </ElRow>
          </ElCollapseItem>
          <ElCollapseItem title="影像增强" name="imageEnhancement">
            <ElRow class="itemRow">
              <ElCol :span="4">
                <span class="label-style"> 采样方式： </span>
              </ElCol>
              <ElCol :span="20">
                <ElRadioGroup
                  v-model="imageRasterRenderOptions.paint['raster-resampling']"
                  size="small"
                >
                  <ElRadio label="linear" style="padding-bottom: 5px">
                    线性
                  </ElRadio>
                  <ElRadio label="nearest" style="padding-bottom: 5px">
                    最近邻
                  </ElRadio>
                </ElRadioGroup>
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 饱和度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  v-model.number="
                    imageRasterRenderOptions.paint['raster-saturation']
                  "
                  show-input
                  :min="-100"
                  size="small"
                />
              </ElCol>
            </ElRow>
            <ElRow class="itemRow">
              <ElCol :span="6">
                <span class="label-style"> 对比度： </span>
              </ElCol>
              <ElCol :span="18">
                <ElSlider
                  v-model.number="
                    imageRasterRenderOptions.paint['raster-contrast']
                  "
                  show-input
                  :min="-100"
                  size="small"
                />
              </ElCol>
            </ElRow>
          </ElCollapseItem>
        </ElCollapse>
      </ElCol>
    </ElRow>
  </div>
</template>

<style scoped>
.all {
  width: 100%;
}

.itemRow {
  width: 100%;
  padding: 5px;
}

.preview {
  height: 170px;
}

.el-input {
  width: 100%;
}

.label-style {
  font-size: 15px;
}

.colorInput {
  caret-color: transparent;
}

:deep(.colorInput .el-input__inner:hover) {
  cursor: pointer;
}

:deep(.el-table .el-table__cell) {
  text-align: center;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
  border: none;

  /* 去除表格边框 */
}

:deep(.el-table--small .cell) {
  height: 25px;
  padding: 0 4px;
}

:deep(.el-collapse-item__header) {
  font-size: 15px;
  font-weight: 600;
}
</style>
